<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>身份使用记录</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <a-table
          size="middle"
          rowKey="id"
          :columns="columns"
          :data-source="rewardUseList"
          :pagination="false"
      >
        <template slot="detail" slot-scope="text, record">
          <div>
            <router-link
                :to="`/records/detail/${record.record_id}`"
            >
              {{ record.record_id }}
            </router-link>
          </div>
        </template>
        <template slot="season" slot-scope="text, record">
          <div>
            S{{ record.season }}赛季
          </div>
        </template>
        <template slot="action" slot-scope="text, record">
          <div>
            <a href="javascript:;" @click="handleDeleteClick(record)">
              删除
            </a>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'RewardUse',

  data () {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '姓名',
          dataIndex: 'player.player'
        },
        {
          title: '使用角色',
          dataIndex: 'role.name'
        },
        {
          title: '使用对局',
          dataIndex: 'record_id',
          scopedSlots: { customRender: 'detail' }
        },
        {
          title: '所属赛季',
          dataIndex: 'season',
          scopedSlots: { customRender: 'season' }
        },
        {
          title: '使用时间',
          dataIndex: 'created_at'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      visible: false,
      loading: false,
      rewardUseList: []
    }
  },

  mounted () {
    this.getRewardUse()
  },

  methods: {
    getRewardUse () {
      this.$http.get('api/admin/reward/use').then((result) => {
        this.rewardUseList = result.data
      }, (error) => {
        this.$message.error(error.message)
      })
    },
    handleDeleteClick (record) {
      this.$confirm({
        title: '确认操作',
        content: '确认后将无法撤回',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$http.delete(`api/admin/reward/use/${record.id}`).then((result) => {
            this.$message.success('删除成功')
            this.getRewardUse()
          }, (error) => {
            this.$message.error(error.message)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}

.record {
  flex: none;
  margin-bottom: 10px;
}
</style>